<template>
  <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px"  :label-width="'0px'" :size="'mini'" style="font-size: 14px">
      <table class="form-table" border="1"  cellpadding="0" cellspacing="0">
        <tr class="my-tr">
          <td width="12%" class="my-td-name"><span style="color:red;margin-right: 3px">*</span><span>姓名</span></td>
          <td width="38%" class="my-td-value">
            <el-form-item prop="name">
              <el-input clearable v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </td>
          <td width="12%" class="my-td-name">性别</td>
          <td width="38%" class="my-td-value">
            <el-form-item prop="sex">
              <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%" clearable>
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="my-td-name"><span>出生日期</span></td>
          <td>
            <el-form-item prop="birth">
              <el-date-picker clearable  style="width: 100%"
                              v-model="form.birth"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择出生日期">
              </el-date-picker>
            </el-form-item>
          </td>
          <td class="my-td-name">就读学校</td>
          <td>
            <el-form-item prop="school">
              <el-input v-model="form.school" placeholder="请输入就读学校" />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="my-td-name"><span>头像</span></td>
          <td colspan="3">
            <el-form-item prop="headImg">
              <el-upload
                action="/dev-api/sysFile/upload/student"
                list-type="picture-card"
                :auto-upload="true">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)">
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
                </div>
              </el-upload>
            </el-form-item>
          </td>
        </tr>
      </table>
    </el-form>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addStudent, updateStudent} from "@/api/biz/student";

export default {
  name: "EditDialog",
  props:["title","open", "form"],
  dicts: ['sys_user_sex'],
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      // 表单校验
      rules: {
      name: [
        { required: true, message: "姓名不能为空", trigger: "blur" }
      ],
    }
    };
  },
  created() {

  },
  methods: {
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.studentId) {
            updateStudent(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("submitForm");
            });
          } else {
            addStudent(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("submitForm");
            });
          }
        }
      });
    },
    cancel() {
      this.$emit("cancel");
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    }
  }
};
</script>
